<template>
  <div class="pageLink">
    <el-dialog
      title="选择页面"
      :visible.sync="Visible"
      width="35%">
      <div class="title">
        系统页面
      </div>
      <div class="dataBox">
        <div
          class="select"
          :class="index == selectIdx? 'checked' : ''"
          v-for="(item, index) in pageData"
          :key="index"
          @click="select(item, index)">
          {{item.title}}
        </div>
      </div>
      <div class="title">
        自定义页面
      </div>
      <div class="dataBox" v-for="(item, index) in definedData" :key="index">
        <div
          class="select"
          :class="idx == selectDefIdx? 'checked' : ''"
          v-for="(child, idx) in item.page_list"
          :key="idx"
          @click="selectdefiend(child, idx, index)"
        >
          {{child.name}}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Visible = false">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getApplyPageList } from "@/api/apply";
import pageData from "./pageLink"
export default {
  props: ["dialogVisible"],
  computed: {
    Visible: {
      get() {
        console.log(121212);
        if (this.dialogVisible === true) {
          this.getDefined();
        }
        return this.dialogVisible;
      },
      set(val) {
        if (val === false) {
          // 关闭弹窗
          this.selectIdx = -1;
          this.selectDefIdx = -1;
        }
        this.$emit("colse");
      }
    }
  },
  data() {
    return {
      pageData,
      selectIdx: -1,
      selectDefIdx: -1,
      selectData: {},
      definedData: []
    }
  },
  methods: {
    // 选择链接
    select(item, idx) {
      this.selectDefIdx = -1;
      this.selectData = item;
      this.selectIdx = idx;
    },
    // 确定
    confirm() {
      this.Visible = false;
      this.$emit("confirm", this.selectData);
    },
    // 获取自定义页面
    getDefined() {
      getApplyPageList(this.$route.query.applyId)
        .then(res => {
          this.definedData = res.data;
        })
    },
    // 选择自定义
    selectdefiend(item, page_idx, group_idx) {
      this.selectIdx = -1;
      this.selectDefIdx = page_idx;
      this.selectData = {
        title: item.name,
        link: `/test?group_idx=${group_idx}&page_idx=${page_idx}`
      }
      console.log(this.selectData);
    }
  }
};
</script>

<style lang="scss" scoped>
.dataBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .select {
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    margin-right: 10px;
    border: 1px solid #d7dadc;
    border-radius: 6px;
    cursor: pointer;
  }
  .checked {
    border: 1px solid #409eff;
    color: #409eff;
  }
}
.title {
  height: 50px;
  line-height: 50px;
}
</style>

<style lang="scss">
.pageLink {
  .el-dialog {
    text-align: left;
    line-height: 20px;
  }
  .el-dialog__body {
    padding: 10px 20px;
  }
}
</style>
